<script>



    import CardContainer from "../../atom/CardContainer.svelte";
    import Button from "../../atom/Button.svelte";
    import {eventEmitter} from "../../eventEmitter.js";

    let event_emitter = eventEmitter;
    const cards = [
        {
            id: 1,
            name: "治疗药水",
            type: "life",
            image: "/bg.png",
            description: "恢复20点生命值",
            actionCost: 2
        },
        {
            id: 2,
            name: "治疗药水",
            type: "life",
            image: "/bg.png",
            description: "恢复20点生命值",
            actionCost: 2
        },
        {
            id: 3,
            name: "治疗药水",
            type: "life",
            image: "/bg.png",
            description: "恢复20点生命值",
            actionCost: 2
        },
        {
            id: 4,
            name: "治疗药水",
            type: "life",
            image: "/bg.png",
            description: "恢复20点生命值",
            actionCost: 2
        },
        {
            id: 5,
            name: "治疗药水",
            type: "life",
            image: "/bg.png",
            description: "恢复20点生命值",
            actionCost: 2
        },
        {
            id: 6,
            name: "治疗药水",
            type: "life",
            image: "/bg.png",
            description: "恢复20点生命值",
            actionCost: 2
        },
        {
            id: 7,
            name: "铁剑",
            type: "attack",
            image: "/bg.png",
            description: "造成15点伤害",
            actionCost: 1
        },{
            id: 8,
            name: "铁剑",
            type: "attack",
            image: "/bg.png",
            description: "造成15点伤害",
            actionCost: 1
        },{
            id: 8,
            name: "铁剑",
            type: "attack",
            image: "/bg.png",
            description: "造成15点伤害",
            actionCost: 1
        },{
            id: 8,
            name: "铁剑",
            type: "attack",
            image: "/bg.png",
            description: "造成15点伤害",
            actionCost: 1
        },{
            id: 8,
            name: "铁剑",
            type: "attack",
            image: "/bg.png",
            description: "造成15点伤害",
            actionCost: 1
        },

    ];

</script>

<div class="page">
    <Button callback="{()=>{
        event_emitter.emit('goto_history_last')
    }}">返回</Button>

    <h1>卡牌库</h1>
    <CardContainer {cards} mode="grid" />

    <h2>手牌展示</h2>
    <CardContainer {cards} mode="hand" />
</div>

<style>
    .page {
        margin: 0 auto;
        min-height: 100vh;
        box-sizing: border-box;
        padding: 20px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.5);
    }

    h1, h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #fff;
    }
</style>